<template>
  <div class="box hide-scroller-bar">
    <div class="page-center">
      <a-page-header
        title="会员中心"
        @back="() => $router.back()"
        style="padding: 10px 24px"
      />
      <a-row :gutter="[16, 16]" style="padding: 0 20px">
        <a-col :span="12">
          <a-card class="card vip-wrapper" style="height: 138px">
            <div class="vip-content">
              <div>
            <div style="font-weight: 600;">会员到期</div>
            <div style="margin: 15px 0">{{
              end_date ? end_date : "未开通"
            }}</div>
            <div>
              <a-space>
                <a-button
                  @click="activateMembershipClick"
                  type="primary"
                  class="activateMembership btn-radius"
                >
                  {{ end_date ? "升级会员" : "开通会员" }}</a-button
                >
                <a-button
                  class="btn-radius"
                  style="margin-left: 10px"
                  @click="camiModalisible = true"
                  >兑换</a-button
                >
              </a-space>
            </div>
           </div>
           <div class="vip-right">
            <div>开通会员</div>
            <div class="mt-5">畅享更多创作权益</div>
           </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="(configs.ai_draw_open || total_art_numbers > 0) ? 6 : 12">
          <a-card class="card" style="height: 138px">
            <div>剩余对话次数 <a-button type="link" @click="userPackageVisible = true">明细</a-button></div>
            <div class="mt-20">
              <span class="number-text">{{
                total_numbers > 100000 ? "100000+" : total_numbers
              }}</span>
            </div>
            <div style="font-size: 12px; color:#a1a1a1;">
              剩余 {{total_word_numbers > 100000 ? "100000+" : total_word_numbers}} 字
            </div>
            <!-- <a-button class="btn-radius" style="margin-top: 10px;"
            >收支明细</a-button
          > -->
          </a-card>
        </a-col>
        <a-col :span="6" v-if="configs.ai_draw_open || total_art_numbers > 0">
          <a-card class="card" style="height: 138px">
            <div>剩余绘画次数</div>
            <div class="mt-20">
              <span class="number-text">{{
                total_art_numbers > 100000 ? "100000+" : total_art_numbers
              }}</span>
            </div>
            <!-- <a-button class="btn-radius" style="margin-top: 10px;"
            >收支明细</a-button
          > -->
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card class="card">
            <div>做任务，免费兑换会员权益</div>
            <a-badge-ribbon
              text="火热"
              color="red"
              style="margin-right: -15px; margin-top: -32px"
            />
            <a-row
              justify="space-between"
              align="middle"
              class="card-row"
              v-if="signGiftNumbers"
            >
              <a-col>
                <a-row align="middle">
                  <a-col class="left-icon">
                    <CarryOutOutlined />
                  </a-col>
                  <a-col class="right-text">
                    <div class="title">每日签到</div>
                    <div class="sub-title">送 {{ signGiftNumbers }} 次</div>
                  </a-col>
                </a-row>
              </a-col>
              <a-col>
                <a-button
                  type="primary"
                  shape="round"
                  ghost
                  @click="todaySignClick"
                  style="width: 140px"
                  :disabled="todaySigned"
                >
                  <CarryOutOutlined />
                  {{ todaySigned ? "今日已签到" : "签到" }}
                </a-button>
              </a-col>
            </a-row>
            <a-row justify="space-between" align="middle" class="card-row">
              <a-col>
                <a-row>
                  <a-col class="left-icon">
                    <GiftOutlined />
                  </a-col>
                  <a-col class="right-text" v-if="configs.spread_share">
                    <div class="title">{{ configs.spread_share.title }}</div>
                    <div class="sub-title">
                      <div v-html="configs.spread_share.first"></div>
                      <div v-html="configs.spread_share.second"></div>
                    </div>
                  </a-col>
                </a-row>
              </a-col>
              <a-col>
                <a-button
                  type="primary"
                  shape="round"
                  ghost
                  @click="genShareLink"
                  style="width: 140px"
                >
                  <CopyOutlined />
                  复制邀请链接
                </a-button>
              </a-col>
            </a-row>
            <a-table
              class="tab-list"
              :dataSource="dataSource"
              :columns="columns"
              :scroll="{ x: 150 }"
              :loading="loading"
              :pagination="pagination"
              @change="handleTableChange"
              rowKey="uid"
            >
              <template #nickname="{ record }">
                <a-row v-if="record.user" align="middle" :gutter="[16, 16]">
                  <a-col> <a-avatar :src="record.user.avatar" /></a-col>
                  <a-col>{{ record.user.nickname }}</a-col>
                </a-row>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <a-modal
      :visible="modalVisible != ''"
      :title="modalTitle[modalVisible] || ''"
      @cancel="modalVisible = ''"
      @ok="modalHandleOk(modalVisible)"
      :footer="false"
    >
      <!-- <template #footer v-if="modalVisible == 'sharePoster'">
        <div></div>
      </template> -->
      <template v-if="modalVisible == 'sharePoster'">
        <div class="flex justify-center" style="height: 70vh">
          <SpreadPoster @error="posterLoadError" />
        </div>
      </template>
    </a-modal>
    <memberShip :visible="showMemberShip" @close="closeMemberShip" />

    <!-- 卡密兑换 -->
    <CamiExchange
      :visible="camiModalisible"
      @onClose="camiModalisible = false"
      @success="camiExchangeSuccess"
    />

    <a-modal :width="1200" v-model:visible="userPackageVisible" title="查看套餐包" :footer="false">
      <a-table :dataSource="packages" :columns="tableColumns" :pagination="false"></a-table>
    </a-modal>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
} from "vue";
import {
  GiftOutlined,
  CopyOutlined,
  CarryOutOutlined,
} from "@ant-design/icons-vue";
import utils from "../../common/utils/utils";
import request from "../../common/utils/request";
import { useRoute, useRouter } from "vue-router";
import SpreadPoster from "../../components/SpreadPoster/index.vue";
import memberShip from "./modules/memberShip.vue";
import { message, Modal, notification } from "ant-design-vue";
import CamiExchange from "../../components/CamiExchange/index.vue";

export default defineComponent({
  name: "vip",
  components: {
    GiftOutlined,
    CopyOutlined,
    SpreadPoster,
    CarryOutOutlined,
    memberShip,
    CamiExchange,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      count: 0,
      dataSource: [],
      columns: [
        {
          title: "已邀请用户",
          slots: {
            customRender: "nickname",
          },
        },
        {
          title: "手机号码",
          dataIndex: "user.phone_txt",
        },
        {
          title: "openid",
          dataIndex: "openid",
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
        },
      ],
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      total_numbers: 0,
      total_word_numbers: 0,
      total_art_numbers: 0,
      end_date: "",

      signGiftNumbers: 0,
      todaySigned: true,

      spread_first_score_scale: "",
      spread_first_money_scale: "",

      configs: {},
      showMemberShip: false,

      camiModalisible: false,
    });

    const packages = ref([])

    const getSpreadList = () => {
      let params = {
        page: state.page,
        pageSize: state.pageSize,
      };
      state.loading = true;
      request.get("/work_ai", "/user/spread/list", params).then((res) => {
        state.dataSource = res.list;
        state.loading = false;
        state.total = res.total;
      });
    };

    const getPackageInfo = () => {
      request.get("/work_ai", "/user/package/info").then((res) => {
        if (res.list) {
          state.total_numbers = res.list.total_numbers;
          state.total_art_numbers = res.list.total_art_numbers;
          state.total_word_numbers = res.list.total_word_numbers;
          packages.value = res.list.packages;
          
          if (res.list.end_date) {
            state.end_date = res.list.end_date;
          }

          if (res.list.daily_sign) {
            state.signGiftNumbers = res.list.daily_sign.number;
            state.todaySigned = res.list.daily_sign.status;
          }
        }
      });
    };

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));
    const handleTableChange = (pager) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getSpreadList();
    };

    //开通会员
    const activateMembershipClick = () => {
      state.showMemberShip = true;
      // router.push({
      //   name: "ActivateMembership",
      // });
    };

    const closeMemberShip = () => {
      state.showMemberShip = false;
    };

    const modalVisible = ref("");
    const modalTitle = {
      sharePoster: "推广二维码",
    };

    const modalHandleOk = (type) => {};

    const posterLoadError = () => {
      modalVisible.value = "";
    };

    const genShareLink = () => {
      request.post("/work_ai", "/user/code").then((res) => {
        if (res.result && res.result.url) {
          let link = `注册即送免费试用机会，戳链接开始使用：${res.result.url}`;
          utils.copyText(link);
        }
      });
    };

    const todaySignClick = () => {
      request.post("/work_ai", "/user/sign/give").then((res) => {
        getPackageInfo();
        if (res.result) {
          notification.success({ message: "签到成功！", duration: 2 });
        }
      });
    };

    const getAiConfig = () => {
      request.get("/work_ai", "/config").then((res) => {
        if (res.list) {
          state.configs = res.list;
        }
      });
    };

    const userPackageVisible = ref(false)

    const tableColumns = ref([
      {
        title: '来源',
        dataIndex: 'from_text',
        key: 'from',
        width: 100
      },
      {
        title: '类型',
        dataIndex: 'type_text',
        key: 'type',
        width: 100
      },
      {
        title: '总次数',
        dataIndex: 'total_numbers',
        key: 'total_numbers',
        width: 100
      },
      {
        title: '剩余次数',
        dataIndex: 'left_numbers',
        key: 'left_numbers',
        width: 100
      },
      {
        title: '剩余字数',
        dataIndex: 'left_words_number',
        key: 'left_words_number',
        width: 120
      },
      {
        title: "高级模型对话总次数",
        dataIndex: "advanced_model_total_numbers",
        key: "advanced_model_total_numbers",
        width: 120,
      },
      {
        title: "剩余高级模型对话次数",
        dataIndex: "advanced_model_left_numbers",
        key: "advanced_model_left_numbers",
        width: 120,
      },
      {
        title: '总允许绘画数',
        dataIndex: 'art_total_numbers',
        key: 'art_total_numbers',
        width: 120
      },
      {
        title: '剩余绘画数',
        dataIndex: 'art_left_numbers',
        key: 'art_left_numbers',
        width: 120
      },
      {
        title: '有效期',
        dataIndex: 'end_date',
        key: 'end_date',
      },
      {
        title: '创建时间',
        dataIndex: 'created_at',
        key: 'created_at',
      }
    ])

    const init = () => {
      getSpreadList();
      getPackageInfo();
      getAiConfig();
    };

    const camiExchangeSuccess = () => {
      state.camiModalisible = false;
      init();
    };

    init();

    return {
      ...toRefs(state),
      handleTableChange,
      pagination,
      activateMembershipClick,
      modalVisible,
      modalTitle,
      modalHandleOk,
      posterLoadError,
      genShareLink,
      todaySignClick,
      closeMemberShip,
      camiExchangeSuccess,
      userPackageVisible,
      tableColumns,
      packages,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden auto;

  .page-center {
    margin: 0 auto;
    max-width: 1200px;

    .btn-radius {
      border-radius: 5px;
    }
    .card {
      border-radius: 10px;
      :deep(.ant-card-body) {
        padding: 15px 20px;
      }
      .activateMembership {
        border: none;
      }
      .number-text {
        font-weight: 700;
        font-size: 28px;
      }

      .card-row {
        border: 1px solid #f1f1f1;
        border-radius: 8px;
        padding: 15px 20px;
        margin-top: 15px;
      }

      .left-icon {
        width: 50px;
        height: 50px;
        border: 1px solid #f1f1f1;
        text-align: center;
        line-height: 47px;
        border-radius: 50%;
        margin-right: 20px;
        font-size: 30px;
        padding-left: 0px;
        color: @primary-color;
      }
      .right-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
          font-size: 15px;
          padding-bottom: 3px;
        }
        .sub-title {
          font-size: 12px;
          color: #00000073;
          // width: 300px;
        }
      }
      .tab-list {
        margin-top: 20px;
      }
    }
  }
}
.vip-wrapper{
  background-image: url('~@/common/image/vip-bg.png');
  background-size: cover; /* 让背景图像充满容器，可能会裁剪部分图像 */
  background-position: center; /* 将背景图像居中显示 */
  background-repeat: no-repeat;
}
.vip-content{
  display: flex;
  justify-content: space-between;
  align-items:center;
 
}
.vip-right{
  width: 200px;
  height: 86px;
  background-image: url('~@/common/image/vip-right-bg.png');
  background-size: cover; /* 让背景图像充满容器，可能会裁剪部分图像 */
  background-position: center; /* 将背景图像居中显示 */
  background-repeat: no-repeat;
  padding: 15px;
  color: #fff;
  border-radius: 10px;
}
</style>
